<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/black/easyui.css?t=34355">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/farm.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/seed/grid.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/user/grid.css">
    <script type="text/javascript" src="<%=basePath%>ext/farm/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/locale/easyui-lang-zh_CN.js"></script>   
</head>
<style type="text/css">
	body, html{
		width: 100%; 
		height: 100%; 
		background-image: url(<%=basePath%>/images/backgroundImg.png);
	}
</style>
<body style="width: 100%; height: 100%;">
<!-- 用户编辑 -->
<div id="editUser" class="easyui-window" title="" minimizable="false" collapsible="false" 
	maximizable="false" closable="false" style="width: 96%; top: 50px">
	<div id="controlBox">
		<span style="color: white">用户名:</span>
	    <input id="userSearch" class="easyui-textbox" panelHeight="auto">
	    <a href="#" class="easyui-linkbutton c1" iconCls="icon-search" onclick="doSearch()">查询</a>
	    <a href="#" class="easyui-linkbutton c2" iconCls="icon-add" onclick="javascript:grid.edatagrid('addRow')">添加</a>
	    <a href="#" class="easyui-linkbutton c3" iconCls="icon-remove" onclick="javascript:$('#editUserData').dialog('close')">取消</a>
	    <a href="#" class="easyui-linkbutton c5" iconCls="icon-cancel" onclick="javascript:grid.edatagrid('destroyRow')">删除</a>
		<table id="grid" style="width: 100%;"></table>
		<div id="msgBox"></div>
	</div>
</div>

<div id="fileUploadDialog" class="easyui-window" title="" minimizable="false" collapsible="false" maximizable="false"
	closable="false" data-options="closed: true"
	style="width: 400px; height: 100px; padding: 4px;" scrolling="no">
	<form id="fileInput" class="fileInput" method="POST" enctype="multipart/form-data" novalidate>
		头像文件&nbsp&nbsp<input name="filePathName" class="easyui-filebox" 
		data-options="prompt:'请选择需要上传的文件...'" buttonText="选择文件" style="width: 300px"/>
		<div class="fileDialogButtons">
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" 
				onclick="fileUpload()">开始上传</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" 
				onclick="javascript:$('#fileUploadDialog').dialog('close')">关闭窗口</a>
		</div>
	</form>
</div>

<script>
    var params = {
        id: '',
        mode: 'insert'
    };
    // 表示当前被修改的用户的id
    var userId = 0;
    var high = window.innerHeight - 120;
    var grid;
    $(document).ready(function () {
    	
    	// 点击种子商店后，恢复页面原布局
    	parent.document.getElementById("tools").src = "tools.jsp";
		/* window.parent.document.body.rows='60,*,50'; */
    	
        //配置表格
        grid = $('#grid').edatagrid({
            title: '用户清单',
            method: 'post',
            height: high,
            /* height: getHeight(),  */
            url: '<%=basePath%>/user/getList',
            saveUrl: '<%=basePath%>/user/save',
            updateUrl: '<%=basePath%>/user/save',
            destroyUrl: '<%=basePath%>/user/delete',
            border: false,
            rownumbers: true,  // 设置为true，则显示带有行号的列
            remoteSort: true,  // 定义是否从服务器排序数据
            nowrap: false,  // 设置为true，则把数据显示在一行里。设置为true能提高加载性能
            singleSelect: true,  // 设置为true，则只允许选中一行
            fitColumns: true,  // 使列自动展开/折叠以适应数据网格（datagrid）的宽度
            
            pageSize: 5,
            pageList: [5, 10, 15, 20],
            
            pagination: true,  // 设置为true，则在数据网格（datagrid）底部显示分页工具
            striped: true,  // 设置为true，则把行条纹化。（即奇偶行使用不同背景色）
            autoSave: true,  // 自动保存
            idField: "id",
            columns:[[
	        	{field: 'id', title: "ID", width: 20, sortable: true, align: 'center', halign: 'center'},
	        	{field: 'headImg', title: "头像", width: 20, align: 'center', halign: 'center',
	        		editor: {
                        type: 'validatebox',
                        options: {
                            validType: 'length[0,100]',
                            invalidMessage: '有效长度0-100',
                            required: true
                        }
                    },
                    formatter: function (value, row){
                    	return '<img src="<%=basePath%>/images/headImages/' + value + '" width="80%">';
                    }
                    
	        	},
	        	{field: 'userName', title: "用户名", width: 20, sortable: true, align: 'center', halign: 'center',
	        		editor: {
                        type: 'textbox',
                        options: {
                            validType: 'length[0,50]',
                            invalidMessage: '有效长度0-50',
                            required: true
                        }
                    }	
	        	},
	        	{field: 'nickName', title: "昵称", width: 20, sortable: true, align: 'center', halign: 'center',
	        		editor: {
                        type: 'textbox',
                        options: {
                            validType: 'length[0,50]',
                            invalidMessage: '有效长度0-50',
                            required: true
                        }
                    }		
	        	},
	        	{field: 'experience', title: "经验值", width: 20, sortable: true, align: 'center', halign: 'center',
	        		editor: {
                        type: 'numberbox',
                        options: {
                            validType: 'length[0,10]',
                            invalidMessage: '有效值0~10000',
                            required: true
                        }
                    },
                    formatter: function (value, row){
                    	return '<div style="width: 20%; float: left; margin-left: 15%;"><img src="<%=basePath%>/images/experience.png" width="100%"></div>' + 
                    	'<div style="width:20%; float:left; line-height:25px; font-size:16px; line-height=16px;">&nbsp;&nbsp;' + value +'</div>';
                    }
	        	},
	        	{field: 'point', title: "积分", width: 20, sortable: true, align: 'center', halign: 'center',
	        		editor: {
                        type: 'numberbox',
                        options: {
                            validType: 'length[0,10]',
                            invalidMessage: '有效位数位10位以内',
                            required: true
                        }
                    },
                    formatter: function (value, row){
                    	return '<div style="width: 20%; float: left; margin-left: 15%;"><img src="<%=basePath%>/images/point.png" width="100%"></div>' + 
                    	'<div style="width:20%; float:left; line-height:25px; font-size:16px; line-height=16px;">&nbsp;&nbsp;' + value +'</div>';
                    }
	        	},
	        	{field: 'money', title: "金币", width: 20, sortable: true, align: 'center', halign: 'center',
	        		editor: {
                        type: 'numberbox',
                        options: {
                            validType: 'length[0,10]',
                            invalidMessage: '有效位数位10位以内',
                            required: true
                        }
                    },
                    formatter: function (value, row){
                    	return '<div style="width: 20%; float: left; margin-left: 15%;"><img src="<%=basePath%>/images/money.png" width="100%"></div>' + 
                    	'<div style="width:20%; float:left; line-height:25px; font-size:16px; line-height=16px;">&nbsp;&nbsp;' + value +'</div>';
                    }
	        	},
	        	{field: 'operate', title: "操作", width: 40, align: 'center', halign: 'center',
	        		formatter: function (value, row) {
                    	return "<button class='operatorButton' onclick='onloadHeadImg("+ row.id + ")'>上传头像</button>" + "<button class='operatorButton' onclick='saveUserInfo("+ row.id + ")'>保存数据</button>";
                    }	
	        	},
	        	
	        ]],
            destroyMsg: {
                norecord: {
                    title: '警告',
                    msg: '首先需要选中记录，然后在点击删除按钮'
                },
                confirm: {
                    title: '确认',
                    msg: '是否删除选中记录?'
                }
            },
            onSuccess: function (index, result) {
            	// 如果当前修改的用户是登录用户，则刷新menu.jsp，更新用户信息
            	var row = $("#grid").datagrid("getSelected");
                if("${curUser.userName}" && "${curUser.userName}" == row.userName){
                	parent.document.getElementById("menu").src="menu.jsp";
                }
                $.messager.show({
                    title: "消息",
                    msg: result.msg
                });
            },
            onDestroy: function (index, result) {
                $.messager.show({
                    title: "消息",
                    msg: result.msg
                });
            }
        });
    });
    
    function doSearch() {
        grid.datagrid("load", {
        	userName: $("#userSearch").val()
        });
    }
    
    function onloadHeadImg(data){
    	$('#fileUploadDialog').dialog('open');
    	console.log(data);
    }
    
    function saveUserInfo(data){
    	/* console.log(data); */
    	/* grid.datagrid('saveRow'); */
    	
    	var row = $("#grid").datagrid("getSelected");
    	var index = $("#grid").datagrid('getRowIndex', row);
    	$("#grid").datagrid("endEdit", index);
    	
    }
    
    function fileUpload(){
    	$('#fileInput').form('submit',{
    		url: '<%=basePath%>/file/saveHeadImg',
    		success: function (result) {
    			// eval本质就是执行一段代码。如果result是一个文本，那就可以通过这种方式转换为对象
                var result = eval('(' + result + ')');  
                var headImg = result.msg.split(":")[1];
                var row = $("#grid").datagrid("getSelected");
            	
                // 获取被选中行的索引 index
                var index = $("#grid").datagrid('getRowIndex',row);
                $("#grid").datagrid('beginEdit', index);
                row.headImg = headImg;
                var ed = $("#grid").datagrid('getEditor', {index:index, field:'headImg'});
                $(ed.target).val(headImg);
                $('#fileUploadDialog').dialog('close');				
                $.messager.show({
                    title: "消息",
                    msg: result.msg
                });
            }
    	})
    }
    
    function showMessage(result){
    	if(result.code == 1){
    		// 修改的信息为当前用户
    		parent.document.getElementById("menu").src="menu.jsp";
    	}
		$.messager.show({
            title: "消息",
            msg: result.msg
        });
	}
    
    window.addEventListener("resize", function(){
    	var h = window.innerHeight - 120;
    	$('#grid').edatagrid({
    		height: h,
    	})
    });
   
</script>
</body>
</html>